{{#if state.hasSource}}
  <div class="component-viewer-header-time-changes">
    <a class="link-action js-issues-time-changes">
      {{#if period}}{{t 'component_viewer.added'}} {{period.label}}{{else}}<i class="icon-period"></i> {{t 'component_viewer.time_changes'}}{{/if}}
    </a>
  </div>
{{/if}}

<div class="component-viewer-header-expanded-bar-section">
  <div class="component-viewer-header-expanded-bar-section-title">
    {{#if hasIssues}}{{t 'component_viewer.measure_section.filters'}}{{else}}{{t 'component_viewer.no_issues'}}{{/if}}
  </div>
  <ul class="component-viewer-header-expanded-bar-section-list">
    {{#if currentIssue}}
      <li><a class="item js-filter-current-issue">
        <span>{{t 'component_viewer.issues.current_issue'}}</span>
        <i class="icon-chevron-right"></i>
      </a></li>
    {{/if}}
    {{#unless state.removed}}
      <li><a class="item js-filter-unresolved-issues">
        <span>{{t 'component_viewer.issues.unresolved_issues'}}</span>
        <i class="icon-chevron-right"></i>
      </a></li>
    {{/unless}}
    {{#unless state.removed}}
      <li><a class="item js-filter-open-issues">
        <span>{{t 'component_viewer.issues.open_issues'}}</span>
        <i class="icon-chevron-right"></i>
      </a></li>
    {{/unless}}
    {{#unless state.removed}}
      <li><a class="item js-filter-fixed-issues">
        <span>{{t 'component_viewer.issues.fixed_issues'}}</span>
        <i class="icon-chevron-right"></i>
      </a></li>
    {{/unless}}
    {{#unless state.removed}}
      <li><a class="item js-filter-false-positive-issues">
        <span>{{t 'component_viewer.issues.false_positive_issues'}}</span>
        <i class="icon-chevron-right"></i>
      </a></li>
    {{/unless}}
  </ul>
</div>

{{#ifNotEmpty state.severities}}
  <div class="component-viewer-header-expanded-bar-section">
    <div class="component-viewer-header-expanded-bar-section-title">
      {{t 'component_viewer.measure_section.severities'}}
    </div>
    <ul class="component-viewer-header-expanded-bar-section-list">
      {{#each state.severities}}
        {{#unless ../../state.removed}}
          <li><a class="item js-filter-{{key}}-issues">
            <span>{{severityIcon key}} {{name}}</span>
            <span class="number">{{count}}</span>
            <i class="icon-chevron-right"></i>
          </a></li>
        {{else}}
          <li><span class="item">
            <span>{{severityIcon key}} {{name}}</span>
            <span class="number">{{count}}</span>
          </span></li>
        {{/unless}}
      {{/each}}
    </ul>
  </div>
{{/ifNotEmpty}}

{{#ifNotEmpty state.rules}}
  <div class="component-viewer-header-expanded-bar-section">
    <div class="component-viewer-header-expanded-bar-section-title">
      {{t 'component_viewer.measure_section.rules'}}
    </div>
    <ul class="component-viewer-header-expanded-bar-section-list">
      {{#each state.rules}}
        {{#unless ../../state.removed}}
          <li><a class="item js-filter-rule" data-rule="{{key}}" title="{{name}}">
            <span>{{name}}</span>
            <span class="number">{{count}}</span>
            <i class="icon-chevron-right"></i>
          </a></li>
        {{else}}
          <li><span class="item">
            <span>{{name}}</span>
            <span class="number">{{count}}</span>
          </span></li>
        {{/unless}}
      {{/each}}
    </ul>
  </div>
{{/ifNotEmpty}}

{{#if hasIssues}}
  <div class="component-viewer-header-expanded-bar-section component-viewer-header-expanded-bar-section-actions">
    <div class="component-viewer-header-expanded-bar-section-title">&nbsp;</div>
    <ul class="component-viewer-header-expanded-bar-section-list">
      {{#if state.canBulkChange}}
        <li><a class="link-action js-issues-bulk-change">
          <span><i class="icon-bulk-change"></i> {{t 'bulk_change'}}</span>
        </a></li>
      {{/if}}
    </ul>
  </div>
{{/if}}
